<template>
  <div
    :class="className"
    :style="{height: height, width: width}"
  />
</template>

<script lang="ts">
import * as echarts from 'echarts'
import { EChartsOption } from 'echarts'
import { Component, Prop } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ResizeMixin from '@/components/Charts/mixins/resize'
import { getBranchIssuesTickets } from '@/api-scp/dashboard'
import { BranchIssuesTickets } from '@/api-scp/types'

interface LDC {
  name: string
  netLoss: number
  coverLoss: number
}

@Component({
  name: 'LossesChart',
  components: {}
})
export default class extends mixins(ResizeMixin) {
  @Prop({ default: 'chart' }) private className!: string
  @Prop({ default: '100%' }) private width!: string
  @Prop({ default: '200px' }) private height!: string

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  }

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }

  private async initChart() {
    this.chart = echarts.init(this.$el as HTMLDivElement)

    const data0: BranchIssuesTickets[] = await getBranchIssuesTickets()
    const data = data0.map(it => {
      const {
        name,
        issues,
        regs
      } = it
      return {
        name,
        netLoss: regs,
        coverLoss: issues
      } as LDC
    })
    this.setOptions(data)
  }

  private setOptions(data: LDC[]) {
    if (!this.chart) {
      return
    }

    const option: EChartsOption =
      {
        legend: {},
        dataset: {
          dimensions: [
            { name: 'name' },
            { name: 'coverLoss' },
            { name: 'netLoss' }
          ],
          source: data
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            rotate: 60,
            formatter: function(value, index) {
              if (typeof value === 'string') {
                return value.replace(/分行$/g, '')
              }
              return value ? '' + value : ''
            }
          }
          // axisLine: {
          //   show: true
          // }
        },
        yAxis: {
          type: 'value',
          // axisLabel: {
          //   formatter: '{value} 万元'
          // },
          name: '（万元）'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        series: [
          {
            type: 'line',
            name: '保险收回的损失',
            stack: 'Loss',
            areaStyle: {},
            // label: {
            //   show: true
            // },
            encode: {
              x: 0,
              y: 1
            }
          },
          {
            type: 'line',
            name: '净损失',
            stack: 'Loss',
            areaStyle: {},
            // label: {
            //   show: true
            // },
            encode: {
              x: 0,
              y: 2
            }
          }
        ]
      }

    console.log(JSON.stringify(option, null, 2))

    this.chart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>

</style>
